import store from '@/store';
import {
  CONTENT_WIDTH_TYPE,
  SIDEBAR_TYPE, TOGGLE_COLOR,
  TOGGLE_CONTENT_WIDTH, TOGGLE_FIXED_HEADER,
  TOGGLE_FIXED_SIDEBAR,
  TOGGLE_LAYOUT,
  TOGGLE_MOBILE_TYPE, TOGGLE_NAV_THEME, TOGGLE_WEAK
} from '@/store/mutation-types';

const { body } = document;
const WIDTH = 992; // refer to Bootstrap's responsive design

export default {
  beforeMount() {
    window.addEventListener('resize', this.$_resizeHandler);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.$_resizeHandler);
  },
  mounted() {
    const isMobile = this.$_isMobile();

    this.$store.commit(TOGGLE_MOBILE_TYPE, isMobile);
    // if (isMobile) {
    // }
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
    $_isMobile() {
      const rect = body.getBoundingClientRect();
      return rect.width - 1 < WIDTH;
    },
    $_resizeHandler() {
      if (!document.hidden) {
        const isMobile = this.$_isMobile();

        this.$store.commit(TOGGLE_MOBILE_TYPE, isMobile);
      }
    }
  }
};
